<template>
  <view class="refund-page">
    <!-- 订单商品列表 -->
    <view class="order-list">
      <view class="order-item" v-for="(item, index) in goods_list" :key="index">
        <image :src="item.goods_image" class="order-img"></image>
        <view class="order-info">
          <text class="order-name">{{ item.goods_name }}</text>
          <text class="order-price">￥{{ item.goods_price }}</text>
        </view>
      </view>
    </view>

    <!-- 金额信息 -->
    <view class="amount-info">
      <text class="amount">付款金额: ￥{{ orderInfo.order_pay_price }}</text>
      <text class="amount">退款金额: ￥{{ orderInfo.pay_price }}</text>
    </view>

    <!-- 退款原因选择 -->
    <view class="refund-reason">
      <u-form-item label="退款原因：" label-width="150">
        <view @click="showSelect = true" class="custom-input">
          <text class="placeholder" v-if="!refundReason">请选择退款原因</text>
          <text class="value" v-else>{{ refundReason }}</text>
        </view>
      </u-form-item>
      <u-select v-model="showSelect" :list="reasons" @confirm="selectReason"></u-select>

    </view>

    <!-- 补充说明 -->
    <view class="additional-info">
      <u-form-item label="补充说明：" label-width="150">
        <u-input type="textarea" v-model="remark" placeholder="请输入退款补充说明"></u-input>
      </u-form-item>
    </view>
    <view class="upload-file">
      <u-form-item label="附件图片" label-width="150">
        <upload-file
            ref="upload"
            :action="action"
            :max-size="maxSize"
            :max-count="maxCount"
            :limit-type="limitType"
            @success="handleFileUploadSuccess"
            @remove="handleFileUploadRemove"
            @error="handleError"
        />
      </u-form-item>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-button">
      <u-button type="primary" @click="submitRefund">提交退款申请</u-button>
    </view>
  </view>
</template>

<script>

import {ready, create} from "@/common/refund_api";
import uploadFile from "@/components/UploadFile.vue";
import constConfig from "@/const";

export default {
  components: {
    uploadFile
  },
  data() {
    return {
      orderInfo: {
        order_sn: '',
        order_pay_price: '',
        pay_price: ''
      },
      goods_list: [],
      order_sn: '',
      reasons: [
        {label: '不想要了', value: '不想要了'},
        {label: '缺货', value: '缺货'},
        {label: '质量问题', value: '质量问题'},
        {label: '发错货', value: '发错货'},
        {label: '其他原因', value: '其他原因'}
      ],
      refundReason: '',
      remark: '',
      images: [],
      showSelect: false,

      action: constConfig.baseUrl + '/upload/image',
      maxSize: 2 * 1024 * 1024, // 可以设置不同的大小限制
      maxCount: 3, // 可以设置不同的数量限制
      limitType: ['png', 'jpg', 'jpeg'], // 支持的文件类型
    };
  },
  onLoad(options) {
    this.order_sn = options.order_sn;
    this.getReady();
  },
  methods: {
    selectReason(e) {
      this.refundReason = e[0].value;
    },
    getReady() {
      ready({
        order_sn: this.order_sn
      }).then(res => {
        console.log(res);
        if (res.code === 0) {
          this.reasons = res.data.reasons;
          this.goods_list = res.data.goods_list;
          this.orderInfo = res.data.order_info;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }
      })
    },
    submitRefund() {
      if (!this.refundReason) {
        uni.showToast({
          title: '请选择退款原因',
          icon: 'none'
        });
        return;
      }
      create({
        order_sn: this.order_sn,
        reason: this.refundReason,
        remark: this.remark,
        images: this.images
      }).then(res => {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
        if (res.code === 0) {

          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        }
      })
    },
    handleError(data, index, lists, name) {
      this.$u.toast('文件上传失败')
      this.handleRemove(index, lists, name)
    },

    handleFileUploadSuccess({url, index, fileList, res}) {
      console.log('文件上传成功:', fileList);
      if (res.code === 0) {
        this.images.push(res.data.full_url)
      } else {
        this.$u.toast(res.msg)
        //移除文件
        this.$refs.upload.remove(index)
      }
    },
    handleFileUploadRemove({index, fileList}) {
      // 更新状态或者做其他处理
      console.log('文件已被移除:', index);
      this.images.splice(index, 1)
      return true
    },
  }
};
</script>

<style scoped>
.refund-page {
  padding: 20px;
  background-color: white;
}

.order-list {
  margin-bottom: 20px;
}

.order-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.order-img {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}

.order-info {
  flex: 1;
}

.order-name {
  font-size: 16px;
  color: #333;
}

.order-price {
  color: #ff5a00;
}

.amount-info {
  margin-bottom: 20px;
}

.amount-info .amount {
  margin-left: 20rpx;
}

.refund-reason {
  margin-bottom: 20px;
}

.additional-info {
  margin-bottom: 20px;
}

.submit-button {
  text-align: center;
}

.custom-input {
  padding: 20rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  background-color: #f8f8f8;
  font-size: 28rpx;
}

.placeholder {
  color: #999;
}

.value {
  color: #333;
}
</style>
